<template>
  <div class="info-form">
    <div class="form-line">
      <div class="form-left">👦昵称</div>
      <div class="form-right">
        <el-input v-model="nickname"/>
      </div>
    </div>
    <div class="form-line">
      <div class="form-left">📱电话</div>
      <div class="form-right">
        <el-input v-model="phone"/>
      </div>
    </div>
    <div class="form-line">
      <div class="form-left">✉️微信</div>
      <div class="form-right">
        <el-input v-model="wechat"/>
      </div>
    </div>
    <div class="form-line">
      <div class="form-left">🌏github</div>
      <div class="form-right">
        <el-input v-model="github"/>
      </div>
    </div>
    <div class="form-line">
      <div class="form-left">🌏个人网站</div>
      <div class="form-right">
        <el-input v-model="website"/>
      </div>
    </div>
    <div class="form-line">
      <div class="form-left">🙋  简介</div>
      <div class="form-right">
        <el-input type="textarea" v-model="introduction" :auto-size="{  maxRows: 3 }"/>
      </div>
    </div>
    <div class="form-line">
      <el-button type="success" style="margin: auto" @click="saveAll">保存</el-button>
    </div>
  </div>
</template>

<script>
import {User} from "../../utils/http/user"
export default {
  name: "InfoForm",
  data: function () {
    return {
      nickname: "",
      phone: "",
      introduction: "",
      github: "",
      website: "",
      wechat:""
    }
  },
  mounted: function () {
    let info = this.$store.state.userInfo;
    this.nickname = info.nickname;
    this.phone = info.phone;
    this.introduction = info.introduction;
    this.github = info.github;
    this.website = info.website;
    this.wechat = info.wechat;
  },
  methods: {
    async saveAll(){
      let info = {
        nickname: this.nickname,
        phone:this.phone,
        introduction:this.introduction,
        github:this.github,
        website:this.website,
        wechat:this.wechat,
        favicon:this.$store.state.userInfo.favicon
      }
      let resp = await User.changeUserInfo(info)
      if (resp.success) {
        this.$message.success("修改成功")
        localStorage.info = JSON.stringify(info)
        this.$store.commit('updateInfo',info)
        this.$emit('closeModal')
      }else{
        this.$message.error(resp.message)
      }

    }
  }
}

</script>

<style scoped>
.info-form {
  width: 100%;
  max-height: 550px;
  overflow-y: auto;
}

.form-line {
  width: 100%;
  padding: 10px 0;
  position: relative;
  display: flex;
}

.form-left {
  width: 15%;
  font-size: 18px;
}

.form-right {
  width: 85%;
}
</style>